<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>神秘学香薰蜡烛制作助手</title>
    <link rel="stylesheet" href="styles.css">
    <!-- Supabase CDN -->
    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
    <!-- Font Awesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="app-container">
        <!-- 顶部导航栏 -->
        <nav class="navbar">
            <div class="nav-content">
                <div class="nav-left">
                    <i class="fas fa-fire nav-icon"></i>
                    <h1 class="app-title">神秘学香薰蜡烛助手</h1>
                </div>
                <div class="nav-right">
                    <button class="nav-btn" id="inventoryBtn">
                        <i class="fas fa-boxes"></i>
                        库存管理
                    </button>
                    <button class="nav-btn" id="settingsBtn">
                        <i class="fas fa-cog"></i>
                        设置
                    </button>
                </div>
            </div>
        </nav>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <!-- 欢迎页面 -->
            <div class="welcome-section" id="welcomeSection">
                <div class="welcome-card">
                    <div class="welcome-icon">
                        <i class="fas fa-magic"></i>
                    </div>
                    <h2>欢迎来到神秘学香薰蜡烛世界</h2>
                    <p>在这里，您可以创造独特的香薰蜡烛，每一款都蕴含着神秘的能量与意义</p>
                    <button class="primary-btn" id="startCreationBtn">
                        <i class="fas fa-plus"></i>
                        开始制作
                    </button>
                </div>
            </div>

            <!-- 制作流程页面 -->
            <div class="creation-section hidden" id="creationSection">
                <div class="progress-bar">
                    <div class="progress-step active" data-step="1">
                        <span class="step-number">1</span>
                        <span class="step-label">选择功效</span>
                    </div>
                    <div class="progress-step" data-step="2">
                        <span class="step-number">2</span>
                        <span class="step-label">选择精油</span>
                    </div>
                    <div class="progress-step" data-step="3">
                        <span class="step-number">3</span>
                        <span class="step-label">选择蜡材</span>
                    </div>
                    <div class="progress-step" data-step="4">
                        <span class="step-number">4</span>
                        <span class="step-label">选择容器</span>
                    </div>
                    <div class="progress-step" data-step="5">
                        <span class="step-number">5</span>
                        <span class="step-label">包装设计</span>
                    </div>
                    <div class="progress-step" data-step="6">
                        <span class="step-number">6</span>
                        <span class="step-label">成本核算</span>
                    </div>
                </div>

                <div class="creation-content">
                    <!-- 步骤1: 选择功效 -->
                    <div class="step-content active" id="step1">
                        <h3>选择您希望的蜡烛功效</h3>
                        <div class="effects-grid" id="effectsGrid">
                            <!-- 动态生成功效选项 -->
                        </div>
                    </div>

                    <!-- 步骤2: 选择精油 -->
                    <div class="step-content" id="step2">
                        <h3>选择精油</h3>
                        <div class="oils-grid" id="oilsGrid">
                            <!-- 动态生成精油选项 -->
                        </div>
                    </div>

                    <!-- 步骤3: 选择蜡材 -->
                    <div class="step-content" id="step3">
                        <h3>选择蜡材和用量</h3>
                        <div class="wax-options" id="waxOptions">
                            <!-- 动态生成蜡材选项 -->
                        </div>
                        <div class="quantity-selector">
                            <label for="waxAmount">蜡的用量 (克):</label>
                            <input type="number" id="waxAmount" min="50" max="500" value="200">
                        </div>
                    </div>

                    <!-- 步骤4: 选择容器 -->
                    <div class="step-content" id="step4">
                        <h3>选择容器</h3>
                        <div class="containers-grid" id="containersGrid">
                            <!-- 动态生成容器选项 -->
                        </div>
                    </div>

                    <!-- 步骤5: 包装设计 -->
                    <div class="step-content" id="step5">
                        <h3>选择包装</h3>
                        <div class="packaging-grid" id="packagingGrid">
                            <!-- 动态生成包装选项 -->
                        </div>
                    </div>

                    <!-- 步骤6: 成本核算 -->
                    <div class="step-content" id="step6">
                        <h3>成本核算与定价</h3>
                        <div class="cost-summary">
                            <div class="cost-breakdown" id="costBreakdown">
                                <!-- 动态生成成本明细 -->
                            </div>
                            <div class="pricing-section">
                                <div class="total-cost">
                                    <span>总成本: </span>
                                    <span id="totalCost">¥0.00</span>
                                </div>
                                <div class="pricing-input">
                                    <label for="sellingPrice">售价设定:</label>
                                    <input type="number" id="sellingPrice" step="0.01" min="0">
                                </div>
                                <div class="profit-margin">
                                    <span>利润率: </span>
                                    <span id="profitMargin">0%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="step-navigation">
                    <button class="secondary-btn" id="prevBtn" disabled>
                        <i class="fas fa-arrow-left"></i>
                        上一步
                    </button>
                    <button class="primary-btn" id="nextBtn">
                        下一步
                        <i class="fas fa-arrow-right"></i>
                    </button>
                    <button class="success-btn hidden" id="finishBtn">
                        <i class="fas fa-check"></i>
                        完成制作
                    </button>
                </div>
            </div>

            <!-- 库存管理页面 -->
            <div class="inventory-section hidden" id="inventorySection">
                <div class="inventory-header">
                    <h2>库存管理</h2>
                    <button class="primary-btn" id="backToHomeBtn">
                        <i class="fas fa-home"></i>
                        返回首页
                    </button>
                </div>
                <div class="inventory-content">
                    <div class="inventory-stats">
                        <div class="stat-card">
                            <i class="fas fa-cubes"></i>
                            <div class="stat-info">
                                <span class="stat-number" id="totalProducts">0</span>
                                <span class="stat-label">总商品数</span>
                            </div>
                        </div>
                        <div class="stat-card">
                            <i class="fas fa-dollar-sign"></i>
                            <div class="stat-info">
                                <span class="stat-number" id="totalValue">¥0</span>
                                <span class="stat-label">库存总值</span>
                            </div>
                        </div>
                    </div>
                    <div class="inventory-list" id="inventoryList">
                        <!-- 动态生成库存列表 -->
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 模态框 -->
    <div class="modal hidden" id="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 id="modalTitle">标题</h3>
                <button class="modal-close" id="modalClose">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body" id="modalBody">
                <!-- 动态内容 -->
            </div>
        </div>
    </div>

    <script src="config.js"></script>
    <script src="data.js"></script>
    <script src="app.js"></script>
</body>
</html>